<!DOCTYPE html>
<html>
<head>
	<title>move timed</title>
	<meta charset="utf-8" />
	<style type="text/css">
		.box{
			width: 100%;
			min-width: 1200px;
			margin: 0 auto;
			min-height: 800px;
			overflow: hidden;
			background: #eee;
		}
		.box div{
			width: 100px;
			height: 100px;
			background: lightblue;
			border-radius: 50%;
			-webkit-transition: -webkit-transform .3s ease;
		    transition: transform .3s ease;
			position: absolute;
		}
		.box div:nth-child(1){
			top: 500px;
			left: 100px;
		}
		.box div:nth-child(2){
			top: 400px;
			left: 680px;
		}
		.box div:nth-child(3){
			top: 100px;
			left: 400px;
		}
	</style>
	<script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
	
</head>
<body>

	<div class="box">
		<div></div>
		<div></div>
		<div></div>
	</div>

<script type="text/javascript">
	

	$(function () {
		// body...
		// var ePageX = null;
  //       var ePageY = null;

        // var box_div = $('.box div')
        
        // var init_xy
        // var init_xy_1
        // var init_xy_2
        // var init_xy_3
		// var xy_i = setInterval(function () {
		// 	init_xy_1 = $('.box div:nth-child(1)').offset()
		// 		init_xy_2 = $('.box div:nth-child(2)').offset()
		// 		init_xy_3 = $('.box div:nth-child(3)').offset()
		// 	for (var i = 0; i < box_div.length; i++) {
		// 		init_xy = $('.box div:nth-child('+ (i+1) +')').offset()
		// 		console.log($('.box div:nth-child('+ (i+1) +')').offset())
		// 	}
		// }, 100)


		var movel = {
	    	rightMoveL: '',
	    	leftMoveL: '',
	    	downMoveL: '',
	    	upMoveL: '',
	    }
	    var oXArr = [];
	    var oYArr = [];
	    var rightArr = [];
	    var leftArr = [];
	    var topArr = [];
	    var downArr = [];
        $("body").on('mousemove', function (event) {
            event = event || window.event;
            // ePageX = event.pageX;
            // ePageY = event.pageY;
            // console.log(ePageX)

            var obxX = event.pageX;
	        var obxY = event.pageY;
            oXArr.unshift(obxX);
	        oYArr.unshift(obxY);
	        oXArr.splice(2, 1);
	        oYArr.splice(2, 1);

	        // tfo();
	        function tfo() {

	            if (oXArr[0] > oXArr[1]) {
	                // console.log("向右");
	                leftArr = [];
	                rightArr.push(obxX);
	                movel.rightMoveL = Math.abs(rightArr[rightArr.length - 1] - rightArr[0]);
	                console.log(movel.rightMoveL)

	                return true;
	            } else {
	                // console.log("向左");
	                rightArr = [];
	                leftArr.push(obxX);
	                movel.leftMoveL = Math.abs(leftArr[leftArr.length - 1] - leftArr[0]);
	                // console.log(movel.leftMoveL)

	                console.log(movel)
	                return false;
	            }

	        }
	        // tfw();
	        function tfw() {
	            if (oYArr[0] > oYArr[1]) {
	                // console.log("向下");
	                topArr = [];
	                downArr.push(obxY);
	                movel.downMoveL = Math.abs(downArr[downArr.length - 1] - downArr[0]);

	                return true;
	            } else {
	                // console.log("向上");
	                downArr = [];
	                topArr.push(obxY);
	                movel.upMoveL = Math.abs(topArr[topArr.length - 1] - topArr[0]);

	                return false;
	            }
	        }

            // $('.box div:nth-child(1)').css('left', ePageX / 10 + init_xy_1.left)
            // $('.box div:nth-child(2)').css('left', ePageX / 5 + init_xy_2.left)
            // $('.box div:nth-child(3)').css('left', ePageX / 5 + init_xy_3.left)
        });
        
	})
</script>
</body>
</html>